<template>
	<view class="container">
		<view class="head">
			<view class="venue">
				<view class="venue-box" @click="showVenueSelectBox">
					<view class="venue-title ellipsis">{{nowStartingPlaceInfo?.terminalPointName}}</view>
					<up-icon name="arrow-down-fill" class="icon" color="#0E1624" size="20"></up-icon>
				</view>
				<scroll-view scroll-y class="venue-select-box" v-if="isShowVenueSelectBox">
					<view class="venue-item" :class="item.id == nowStartingPlaceInfo.id && 'active'"
						v-for="item in venueList" :key="item.id" @click="changeVenue(item)">
						{{item.terminalPointName}}
					</view>
				</scroll-view>
			</view>
			<DateSelect class="date-select-box" @changeDate="changeDate" />
		</view>
		<mapComp class="map"></mapComp>
		<view class="bottom-content">
			<view class="content statistics">
				<view class="top">
					<view class="title">
						收储统计
					</view>
					<view class="tip">
						(方量：方)
					</view>
				</view>
				<view class="bottom">
					<view class="items">

						<view class="item">
							<view class="name">
								来料项目
							</view>
							<view class="num">
								3
							</view>
						</view>
						<view class="item item2">
							<view class="name">
								已到场
							</view>
							<view class="num">
								2400
							</view>
						</view>
						<view class="item item3">
							<view class="name">
								在途中
							</view>
							<view class="num">
								240
							</view>
						</view>

					</view>
				</view>
			</view>
			<view class="content">
				<view class="top">
					<view class="title">
						内转统计
					</view>
				</view>
				<view class="bottom">
					<view class="top-area">
						<view class="area">
							<view class="area-left">
								<view class="area-arrow">
									<view class="count">
										<text>2400方</text>
										<text class="num">100趟</text>
									</view>
									<view class="arrow">
										<image class="img" src="/static/img/consumptionAdmin/arrow1.png"></image>
									</view>
								</view>
								<view class="area-arrow area-arrow2">
									<view class="count">
										<text>120方</text>
										<text class="num">5趟</text>
									</view>
									<view class="arrow">
										<image class="img" src="/static/img/consumptionAdmin/arrow2.png"></image>
									</view>
								</view>
							</view>
							<view class="area-content" @click="goPage('4')">
								<image class="icon" src="/static/img/consumptionAdmin/rawMaterial.png"></image>
								<view class="name">
									原料区
								</view>
							</view>
						</view>
						<view class="area">
							<view class="area-left">
								<view class="area-arrow">
									<view class="count">
										<text>1200方</text>
										<text class="num">50趟</text>
									</view>
									<view class="arrow">
										<image class="img" src="/static/img/consumptionAdmin/arrow1.png"></image>
									</view>
								</view>
								<view class="area-arrow area-arrow3">
									<view class="count">
										<text>24方</text>
										<text class="num">1趟</text>
									</view>
									<view class="arrow">
										<image class="img" src="/static/img/consumptionAdmin/arrow3.png"></image>
									</view>
								</view>
							</view>
							<view class="area-content" @click="goPage('5')">
								<image class="icon" src="/static/img/consumptionAdmin/production.png"></image>
								<view class="name">
									生产区
								</view>
							</view>
						</view>
					</view>
					<view class="bottom-area">

						<view class="area-arrow">
							<view class="count">
								<text>24方</text>
								<text class="num">1趟</text>
							</view>
							<view class="arrow">
								<image class="img" src="/static/img/consumptionAdmin/arrow2.png"></image>
							</view>
						</view>
						<view class="area-content" @click="goPage('6')">
							<image class="icon" src="/static/img/consumptionAdmin/finishedProduct.png"></image>
							<view class="name">
								成品区
							</view>
						</view>
						<view class="area-right">
							<view class="empty-box">

							</view>
							<view class="count">
								<text>1000方</text>
								<text class="num">40趟</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	// import { ref } from 'vue';
	import { computed, ref } from 'vue';
	import DateSelect from '@/components/consumptionAdmin/dateSelect/dateSelect.vue';
	import mapComp from '@/components/consumptionAdmin/map/map.vue'
	import { useConsumptionStore } from '@/stroes';
	// 消纳端仓库
	const consumptionStore = useConsumptionStore()
	// 修改日期
	const changeDate = (id) => {
		console.log('当前日期', id);
	}
	// 去区域详情页面
	const goPage = (type) => {
		uni.navigateTo({
			url: '/pages/consumptionAdmin/statisticalDetails/statisticalDetails?id=' + type
		})
	}
	// 是否显示起点名称选择框
	const isShowVenueSelectBox = ref(false)
	// 起点名称列表
	const venueList = computed(() => {
		return consumptionStore.venueList
	})
	// console.log('uuuu', venueList.value);
	// 当前起点名称信息
	const nowStartingPlaceInfo = computed(() => {
		return consumptionStore.nowVenue
	})
	// 显示/隐藏起点名称选择框
	const showVenueSelectBox = () => {
		isShowVenueSelectBox.value = !isShowVenueSelectBox.value
	}
	// 修改起点名称
	const changeVenue = (item) => {
		consumptionStore.nowVenue = item
		isShowVenueSelectBox.value = false
	}
</script>

<style scoped lang="scss">
	.map {
		height: 826rpx;
	}

	.head {
		position: fixed;
		top: 88rpx;
		z-index: 9;

		.venue {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-left: 20rpx;
			margin-bottom: 20rpx;
			font-size: 32rpx;
			color: $default-color;

			.venue-box {
				display: flex;
				align-items: center;
				// margin-right: 20rpx;
			}

			.ellipsis {
				white-space: nowrap;
				/* 确保文本在一行内显示 */
				overflow: hidden;
				/* 隐藏超出容器的内容 */
				text-overflow: ellipsis;
				/* 使用省略号表示被截断的文本 */
				max-width: 200rpx;
				/* 设置最大宽度，确保文本超出时生效 */
			}

			.icon {
				margin-left: 10rpx;
				width: 26rpx;
				height: 18rpx;
			}

			.venue-select-box {
				position: absolute;
				bottom: -260rpx;
				left: 0;
				width: 600rpx;
				height: 240rpx;
				color: #000;
				background-color: #fff;
				border-radius: 8rpx;
				z-index: 999;
				padding: 20rpx;
				box-sizing: border-box;

				.venue-item {
					margin: 10rpx;

					&.active {
						color: $primary-color;
					}

					&:hover {
						color: $primary-color;
					}
				}
			}
		}
	}

	/* .date-select-box {
		position: fixed;
		top: 88rpx;
		z-index: 9;
	} */




	.bottom-content {
		position: absolute;
		top: 706rpx;
		padding: 0rpx 32rpx;
		width: 100%;
		box-sizing: border-box;
		z-index: 999;

		.content {
			margin-bottom: 20rpx;
			padding: 32rpx 28rpx 28rpx;
			border-radius: 16rpx;
			background-color: #fff;

			>.top {
				display: flex;
				margin-bottom: 22rpx;

				.title {
					font-size: 28rpx;
					font-weight: bold;
				}

				.tip {
					color: $info-color;
					margin-left: 20rpx;
				}
			}

			>.bottom {

				.items {
					display: flex;
					justify-content: space-between;

					.item {
						width: 200rpx;
						// height: 128rpx;
						text-align: center;
						border-radius: 8rpx;
						background-color: rgba(46, 135, 255, 0.1);
						overflow: hidden;

						&.item2 {
							background-color: rgba(57, 183, 145, 0.1);

							.name {
								background-color: #39B791;
							}
						}

						&.item3 {
							background-color: rgba(255, 164, 46, 0.1);

							.name {
								background-color: #FFA42E;
							}
						}

						.name {
							padding: 10rpx 0rpx;
							font-size: 28rpx;
							color: #fff;
							background-color: #2E87FF;
						}

						.num {
							padding: 24rpx 0rpx;
							font-weight: bold;

						}
					}
				}



				.top-area {
					display: flex;
					justify-content: space-between;
					margin-bottom: 22rpx;

					.area {
						display: flex;
						font-size: 24rpx;

						.area-left {
							.area-arrow {
								margin-bottom: 12rpx;
								margin-right: 28rpx;
								width: 176rpx;
								background-color: rgba(46, 135, 255, 0.1);
								box-sizing: border-box;

								&.area-arrow2 {
									background-color: rgba(255, 164, 46, 0.1);

									.num {
										color: #FFA42E;
									}
								}

								&.area-arrow3 {
									background-color: rgba(235, 79, 81, 0.1);

									.num {
										color: #EB4F51;
									}
								}

								.count {
									display: flex;
									justify-content: space-between;
									padding: 12rpx 10rpx 0rpx;
									white-space: nowrap;
								}

								.num {
									margin-left: 10rpx;
									color: #2E87FF;
								}

								.arrow {
									width: 100%;
									height: 18rpx;

									.img {
										width: 100%;
										height: 100%;
									}
								}
							}
						}

						.area-content {
							text-align: center;

							.icon {
								margin-bottom: 5rpx;
								width: 92rpx;
								height: 92rpx;
							}
						}
					}
				}

				.bottom-area {
					display: flex;
					font-size: 24rpx;

					.area-arrow {
						margin-top: 50rpx;
						margin-right: 32rpx;
						width: 176rpx;
						height: 56rpx;
						background-color: rgba(255, 164, 46, 0.1);


						.count {
							display: flex;
							justify-content: space-between;
							margin: 12rpx 10rpx 0rpx;

							.num {
								color: #FFA42E;
							}
						}

						.arrow {
							// display: flex;
							width: 100%;
							height: 18rpx;

							.img {
								width: 100%;
								height: 100%;
							}
						}
					}

					.area-content {
						text-align: center;

						.icon {
							margin-bottom: 6rpx;
							width: 92rpx;
							height: 92rpx;
						}
					}

					.area-right {
						// flex: 1;
						margin-left: 26rpx;
						width: 302rpx;
						height: 124rpx;
						background: rgba(46, 135, 255, 0.1) url('~@/static/img/consumptionAdmin/arrow4.png') no-repeat bottom / 100% 100%;

						.empty-box {
							width: 254rpx;
							height: 60rpx;
							background-color: #fff;
						}

						.count {
							margin-top: 10rpx;
							margin-left: 10rpx;

							.num {
								margin-left: 30rpx;
								color: #2E87FF;
							}
						}
					}
				}
			}
		}
	}
</style>